import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Table, Row, Col, Button, message, Modal} from 'antd';
import {listStore, editStore, searchStore} from '../TagStore';

const columns = [{
    title: '应用名称',
    dataIndex: 'appName',
    key: 'appName'
}, {
    title: '标签编码',
    dataIndex: 'code',
    key: 'code'
}, {
    title: '标签名称',
    dataIndex: 'name',
    key: 'name'
}, {
    title: '标签描述',
    dataIndex: 'description',
    key: 'description'
}, {
    title: '操作',
    key: 'operation',
    render: (text, record) => (
        <span>
            <a href="javascript:void(0);" onClick={() => {
                editStore.load(record.id);
            }}>编辑</a>
            <span className="ant-divider"/>
            <a href="javascript:void(0);" onClick={(e) => {
                e.preventDefault();
                Modal.confirm({
                    title: '删除页面',
                    content: '确定删除该页面吗?',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        listStore.delete(parseInt(record.id))
                            .then((res) => {
                                if (res.success) {
                                    message.success(res.message, 3);
                                    listStore.refresh(searchStore);
                                } else {
                                    message.error(res.message, 3);
                                }
                            })
                    }
                });
            }}>删除</a>
        </span>
    )
}]

@observer
export class ListTable extends React.Component<any, any> {
    componentDidMount() {
        listStore.load(searchStore.getValues());
    }

    handleTableChange = (pagination, filters, sorter) => {
        let searchParams = searchStore.getValues();

        listStore.load(_.assign(searchParams, {
            pageCount: pagination.pageSize,
            pageIndex: pagination.current
        }));
    }

    render() {
        return (
            <Table
                style={{paddingLeft: 10}}
                columns={columns}
                rowKey="id"
                dataSource={listStore.data as any}
                pagination={listStore.pagination}
                onChange={this.handleTableChange}
            />
        )
    }
}